// 暴露出去一个实例化的 vue-router 的路由实例对象

// 引入 Vue 核心
import Vue from "vue";

// 引入 vue-router 插件
import VueRouter from "vue-router";

// 引入定义好的路由组件 views 文件中写的组件 @ => src
import HelloHome from "@/views/HelloHome";
import HelloAbout from "@/views/HelloAbout";

// 注册 vue-router 插件
Vue.use(VueRouter);

// 定义路由规则集合
// const routes = [
//   {
//     // 一条规则
//     path: '/home',
//     component: HelloHome
//   },
//   {
//     // 一条规则
//     path: '/about',
//     component: HelloAbout
//   }
// ]

// 实例化 路由实例对象
const router = new VueRouter({
  // 配置选项

  // 路由规则集合
  routes: [
    {
      // 一条规则, 一条路由信息
      path: "/home",
      name: "abc", // 命名路由 具有名字的路由 给当前规则取个名字  跳转可以使用 name
      component: HelloHome,
    },
    {
      // 一条规则, 一条路由信息
      path: "/about",
      name: "about", // 命名路由 具有名字的路由 给当前规则取个名字  跳转可以使用 name
      component: HelloAbout,
    },
  ],
});

// 使用 beforeEach  全局前置
router.beforeEach((to, from, next) => {
  // to -> 要去的路由
  // from -> 当前路由
  // next -> 控制函数，
  //      1. next() 正常跳转到 to
  //      2. next(false) 阻止了跳转
  //      3. next(path || {})  跳转到别处
  console.log("beforeEach");
  console.log("to: ", to);
  console.log("from: ", from);
  console.log("next: ", next);

  // 需求：只有 token 存在时，才可以打开 关于页面

  if (to.name === "about") {
    // 做一些校验
    if (localStorage.getItem("token")) {
      // 放行
      next();
    } else {
      // 阻止跳转
      next(false);
    }
  } else {
    // 放行
    next();
  }
});

// 暴露
export default router;
